<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>属性与class绑定</title>

<style media="screen">
.blueP {
color: blue;
}


.color-blue {
background: blue;
}

.color-red {
background: red;
}

</style>

</head>


<body>


<div id="root">

<p> 属性绑定</p>
<button v-bind:title="title">Hover over me</button>

<p> 属性绑定 , 简写</p>
<button  :title="title">Hover over me</button>


<p> 动态判断,如果为真,class使用color-blue的style </p>
<button  :class="{'color-blue':true}"  :disabled="isDisabled" @click="disableMethod">disable</button>



</div>





<!-- vue -->
<!-- <script src="https://unpkg.com/vue@2.4.2"></script> -->
<script src="./js/vue2.4.2.js"></script>

<script >


//使用vue绑定 ， 注意 Vue 的 V大写
var app = new Vue({
 el: '#root',
 data : {
 title : "这是一个新标题",
 color : "color-blue",
 isDisabled : false
 },

//函数之间需要有 , 隔开
 methods: {
 
  clickMethod () {
    alert('hahhahahha');
  } ,

  disableMethod ()  {

    this.isDisabled=true;
  }
  
}



});


</script>


  </body>
</html>
